<template>
	<view class="container">
		<view class="avatar">
			<image :src="avar" class="img"></image>
		</view>
		<view class="student-info" v-for="item in list">
			<view class="key">{{item.key}}</view>
			<view class="value">{{item.value}}</view>
		</view>
		<view class="btn_grand grand uni-mt-30 btn_pos" @click="addStu">拨打联系电话</view>
	</view>
</template>

<script>
	import {getUserInfoById} from "@/api/user"
	export default {
		data() {
			return {
				user: {},
				avar: "",
				list: [{
						key: '老师姓名',
						value: ''
					},
					{
						key: '性别',
						value: ''
					},
					
					{
						key: '联系电话',
						value: ''
					},
					{
						key: '职务',
						value: ''
					},
					{
						key: '老师地址',
						value: ''
					}
				]
			}
		},
		
		onLoad(op) {
			let uid = op.uid;
			this.getUserInfo(uid);
		},
		
		methods: {
			
			getUserInfo(uid) {
				this.m_show("加载中");
				getUserInfoById(uid).then(res=>{
					this.list[0].value = res.data.nickname;
					this.list[1].value = res.data.sex == 1? "男":"女";
					this.list[2].value = res.data.phone;
					
					this.list[3].value = res.data.roleName;
					this.list[4].value = res.data.country;
					this.avar = res.data.avatar;
					this.user = res.data;
					this.m_hide();
				})
			},
			
			addStu() {
				uni.makePhoneCall({
					phoneNumber:  this.user.phone
				});
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.avatar {
		width: 150rpx;
		height: 150rpx;
		margin: 20rpx auto;
		border-radius: 50%;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.student-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;

		.key {
			color: #C0C4C1;
			font-size: 32rpx
		}

		.value {
			font-size: 32rpx
		}
	}

	.container {
		background: #fff;
		height: 100vh;
		padding: 20rpx;
	}

	.btn_pos {
		color: #fff;
		position: absolute;
		left: 50rpx;
		right: 50rpx;
		bottom: 50rpx;
		width: auto;
	}
</style>